<!--课程信息界面-->
<template>
<div>
  <el-menu class="el-menu-demo" background-color="#d9ecff">
    <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
      <img src="../assets/heima.png" alt="">
      <a style="margin-left: 10px">课程学习与认证管理系统</a>
    </el-menu-item>
    <el-menu-item style="float: right">
      <el-button type="primary" @click="returnLogin">退出登录</el-button>
    </el-menu-item>
  </el-menu>
  <el-row>
    <el-col :span="(!isCollapse)? 4:1" style=";margin-top: 10px">
      <el-menu default-active="1" :collapse="isCollapse" :collapse-transition="false" >
        <div class="toggle-button" @click="toggleCollage">|||</div>
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">课程信息</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">单元内容</span>
          </template>
          <el-menu-item index="2-1" @click="toUnitContent">全部单元</el-menu-item>
          <el-menu-item index="2-2" @click="tip1">添加单元</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">课程证书</span>
          </template>
          <el-menu-item index="3-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="4-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
      <el-row>
        <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item style="font-size: x-large" :to="{ path: 'CourseManagement' }">课程管理</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large" >课程信息</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="11" :offset="0">
          <el-form ref="form"  label-width="80px">
            <el-form-item label="课程名称:" prop="name" >
              <el-input  maxlength="30"  v-model="title" readonly></el-input>
            </el-form-item>
            <el-form-item label="课程描述:" prop="desc">
              <el-input type="textarea"
                        :rows="11"
                        v-model="describe"
                        maxlength="300"
                        show-word-limit
                        resize="none"
                        readonly>
              </el-input>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button style="float: right" type="primary" @click="submitForm">保存</el-button>-->
<!--            </el-form-item>-->
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</div>
</template>

<script>
import { post } from '@/common/serviceUtil'

export default {
  name: 'CourseInformation',
  data () {
    return {
      course: {
        courseId: ''
      },
      isCollapse: false,
      title: '',
      describe: ''
    }
  },
  methods: {
    toUnitContent () {
      this.$router.push({
        name: 'UnitContent',
        path: '/UnitContent',
        params: { CourseId: this.course.courseId }
      })
    },
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    },
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    }, // 导航栏开关
    getCourseInformation () {
      post('//localhost:8088/course/getOne', this.course).then((response) => {
        console.log(response)
        if (!response.data.isSuccess) this.$router.push('/CourseManagement')
        this.title = response.data.data.title
        this.describe = response.data.data.describe
      })
    },
    submitForm () {
      alert('目前还未开发出来哦~')
    },
    tip1 () {
      alert('请进入全部单元界面进行添加单元！')
    }
  },
  mounted () {
    this.course.courseId = this.$route.params.CourseId
    this.getCourseInformation()
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.toggle-button{
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size:10px;
  // 设置文本行高
  line-height:24px;
  // 设置文本颜色
  color:#fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor:pointer;
}
.el-menu-item
{
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d9ecff;
  }
}
</style>
